<template>
    <fieldset>
        <legend>二级联动</legend>
        省：{{sell}}
        <select v-model="sell" @change="provienceChange(sell)">
            <option v-for="item in province" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>

        市：
        <select v-model="sell2" @change="provienceChange1(sell2)">
            <option v-for="item in citys" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
          县：
        <select v-model="sell3" >
            <option v-for="item in countrys" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
       
    </fieldset>
</template>
<script>
import * as api from "@/api/select"
export default{

    data () {
        return {
            province:[],
            citys:[],
            countrys:[],
            sell:'1',
            sell2:'',
            sell3:'',
        }
    },
    mounted(){
       api.fetchData()
       .then(res =>{
        console.log(res);
        this.province=res;
        let pid =res[0].id;
        this.provienceChange(pid)
   
       });

       
    },
    methods:{
        provienceChange(pid){
            console.log(pid);
            api.fetchCity(pid)
            .then(res=>{
            console.log(res);
            this.citys=res;
            if(res.length>0){
                this.sell2=res[0].id
                this.provienceChange1(this.sell2)
            }
            })
         
        },

        provienceChange1(aa){
            api.fetchCounty(aa)
            .then(res=>{
                console.log(res);
                this.countrys=res;
                if(res.length>0){
                    this.sell3=res[0].id
                }
            })
        }
    },
}

</script>
<style scoped>
select{
    width:100px;
}

</style>




